<template>
    <div>
       <ul>
         <li v-for="item in list" v-bind:key="item">
           {{ item.cate }}
             <ul>
                 <li v-for="itemson in item.news" v-bind:key="itemson">{{ itemson.title }}</li>
             </ul>
         </li>
       </ul>
       <h2 :style="{color:'red','font-size':fontSize +'px'}">fontSize</h2>
       <button @click="add">+</button>
       <button @click="sub">-</button>
        <a v-bind:href="toutiao"> 今日投缘</a>
        <h2 v-bind:class="getH2Class()">{{ msg }}</h2>
        <button @click="changeColor">换色</button>
    </div>
</template>

<script>
    export default {
        name: "Fst02",

        methods:{
            add(){
                this.fontSize++;
            },
            sub(){
                this.fontSize--;
            },
            getH2Class(){
                return {
                    blue:this.isBlue,
                    red:this.isRed
                }
            },
            changeColor(){
                this.isBlue = !this.isBlue,
                this.isRed =!this.isRed
            }
        },
        data() {
            return{
                fontSize:20,
                toutiao:'http://www.toutiao.com',
                msg:'Hello Vue',
                isBlue:true,
                isRed:false,
                list:[
                    {
                        cate:"财经",
                        news:[{title:"财经01"},{title:"财经02"},{title:"财经03"}]
                    },
                    {
                        cate:"时事",
                        news:[{title:"时事01"},{title:"时事02"}]
                    },
                    {
                        cate:"旅游",
                        news:[{title:"旅游01"},{title:"旅游02"}]
                    }
                    ]
                };
            }
        }
</script>

<style scoped>
.blue{
    color: blue;
    }
.red{
    color: red;
}
.green{
    color:green;
}
.yellow{
    color: yellow;
}
.bold{
    font-size: 40px;
    font-weight: bolder;
}
</style>